<template>
  <div class="dataInspect">
    <div style="flex: 1">
      <el-card shadow="never">
        <div slot="header" style="display: flex;align-items: center;justify-content: space-between;">
          <n-tab :options="tabOptions" @click="tabCheckHandler"/>
          <el-select v-model="assignFormModel.verifyTimes"
                     style="margin-right: 10px;" size="mini" @change="onVerifyTimesChange">
            <el-option
                v-for="item in verifyTimesList"
                :key="item.verifyTimes"
                :label="item.verifyTimeLabel"
                :value="item.verifyTimes">
            </el-option>
          </el-select>
        </div>
        <div class="ha-top">
          <div>
            <span style="font-size: 14px;margin-right: 10px">行政区划</span>
            <el-select v-model="assignFormModel.areaCode" clearable >
              <el-option
                  v-for="item in subAreaList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code">
              </el-option>
            </el-select>
          </div>
          <el-button size="small" plain type="primary" @click="batchAssignDialogFormVisible = true">批量分配</el-button>
        </div>
        <el-dialog title="批量分配" :visible.sync="batchAssignDialogFormVisible"  width="30%">
              <el-select v-model="assignFormModel.judgeBy" placeholder="请选择负责人">
                <el-option
                    v-for="item in assignUserList"
                    :key="item.userName"
                    :label="item.name"
                    :value="item.userName">
                </el-option>
              </el-select>
          <div slot="footer" class="dialog-footer">
            <el-button @click="batchAssignDialogFormVisible = false">取 消</el-button>
            <el-button type="primary" :loading="batchAssignFormLoading" @click="batchAssign">确 定</el-button>
          </div>
        </el-dialog>
        <div style="width: 100%">
          <el-table
              ref="multipleTable"
              :data="judgeTaskList"
              stripe
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange">
            <el-table-column
                type="selection"
                align="center"
                :selectable="selectableFunction"
                width="50">
            </el-table-column>
            <el-table-column
                prop="provinceName"
                label="省"
                align="center"
                >
            </el-table-column>
            <el-table-column
                prop="eparchyName"
                label="市"
                align="center"
                width="150">
            </el-table-column>
            <el-table-column
                prop="countyName"
                label="县"
                align="center"
                width="150">
            </el-table-column>
            <el-table-column
                prop="workDataCount"
                label="调查总数"
                align="center"
                width="120">
            </el-table-column>
            <el-table-column
                prop="sampleDataCount"
                label="抽样数量"
                align="center"
                width="120">
            </el-table-column>
            <el-table-column
                prop="judgeByName"
                label="负责人"
                align="center"
                width="150">
              <template slot-scope="scope">
                <div>
                  <el-select v-if="scope.row.assignTag" v-model="assignFormModel.judgeBy" placeholder="请选择负责人">
                    <el-option
                        v-for="item in assignUserList"
                        :key="item.userName"
                        :label="item.name"
                        :value="item.userName">
                    </el-option>
                  </el-select>
                  <span v-else>{{scope.row.judgeByName}}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
                prop="judgeByName"
                label="操作"
                align="center"
                width="150"
                >
              <template slot-scope="scope">
                <div style="display: flex;flex-wrap: wrap">
                  <el-button :disabled="scope.row.judgeBy" type="text" @click="scope.row.assignTag = true" size="mini" icon="el-icon-share">
                    分配
                  </el-button>
                  <el-button v-if="scope.row.assignTag" @click="assignAlone(scope.row, 'judgeByName', $event)" type="text" size="mini" icon="el-icon-success">
                    确定
                  </el-button>
                  <el-button v-if="scope.row.assignTag" @click="scope.row.assignTag = false" type="text" size="mini" icon="el-icon-error" style="color: red">
                    取消
                  </el-button>
                  <el-button v-if="scope.row.assignTag" @click="scope.row.assignTag = false" type="text" size="mini" icon="el-icon-error" style="color: red">
                    取消分配
                  </el-button>
                  <el-button @click="viewJudgeTaskDetail(scope.row, 'countyCode', $event)" type="text" size="mini" icon="el-icon-view">
                    查看
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
<!--          &lt;!&ndash;分页&ndash;&gt;-->
<!--          <el-pagination-->
<!--              class="pageRow" :style="{'text-align':'right'}"-->
<!--              @size-change="handleSizeChange"-->
<!--              @current-change="handleIndexChange"-->
<!--              :page-size="pagination.pageSize"-->
<!--              :page-sizes="pagination.pageArray" :current-page="pagination.pageNum"-->
<!--              :layout="'total,sizes, prev, pager, next, jumper'"-->
<!--              :hide-on-single-page="pagination.total<=10"-->
<!--              :total="pagination.total"/>-->
        </div>

      </el-card>
    </div>
  </div>
</template>

<script lang="ts">
import {Vue,Component} from 'vue-property-decorator';
import NTab from "@/components/NTab.vue";
import {queryAreaJudgeUser,
  selectDispatchList,
  dispatchJudgeTask,
} from "@/api/verifyJudgeTask";
import { queryUserSubArea} from "@/api/area"
import storeUtils from "@/utils/storeUtils";
import {Message, Loading} from "element-ui";
import {queryVerifyWorkList, queryWorkVerifyTimes,} from "@/api/verifyWork";
@Component({
  methods: {queryVerifyWorkList},
  components: {NTab}
})
export default class judgeTask extends Vue {
  subAreaList:any = [];
  assignUserList:any = [];
  judgeTaskList:any = [];
  verifyTimesList:any = [];
  tabOptions: any = [];
  batchAssignDialogFormVisible = false;
  batchAssignFormLoading = false;
  pagination:any = {
    pageNum: 1,
    pageSize: 10,
    pageArray: [10, 30, 50, 100],
    total: 0,
    page: true
  }
  //导出表单
  assignFormModel:any = {
    workId:'',
    verifyTimes:'',
    areaCode:'',
    countyCodeList:[]
  }

  // 切换每页显示的数量
  handleSizeChange(size: number) {
    if (this.pagination) {
      this.pagination.pageNum = 1;
      this.pagination.pageSize = size;
      this.refresh();
    }
  }

  // 切换页码
  handleIndexChange(pageNum: number) {
    if (this.pagination) {
      this.pagination.pageNum = pageNum;
      this.refresh();
    }
  }

  refresh() {
    this.getJudgeTaskList();
  }

  //调查任务切换
  tabCheckHandler(data) {
    this.queryVerifyTimes(data.item.id);
    this.assignFormModel.workId = data.item.id;
  }

  //查询调查任务抽样次数
  queryVerifyTimes(workId) {
    queryWorkVerifyTimes({workId: workId}).then(res => {
      if (res.data) {
        this.verifyTimesList = res.data
        this.assignFormModel.verifyTimes = res.data[0].verifyTimes
        this.getJudgeTaskList();
      }
    })
  }

  //筛选次数修改
  onVerifyTimesChange() {
    this.getJudgeTaskList()
  }
  //表格多选，已分配的不可再选择
  selectableFunction(row) {
    // 返回false来禁止选择某些行，例如id为特定值的行
    return !row.judgeBy;
  }
  //表格选择
  handleSelectionChange(val) {
    this.assignFormModel.countyCodeList = val.map((row:any)=>row.countyCode);
  }
  //单个分配
  assignAlone(row, key, value) {
    let loadingInstance = Loading.service({fullscreen: true, background: 'rgba(0, 0, 0, 0.7)'});
    this.assignFormModel.countyCodeList = [row.countyCode]
    dispatchJudgeTask(this.assignFormModel).then(res=> {
      Message.success("分配成功");
      this.refresh();
    }).catch(err=> {
      Message.error("分配失败")
    }).finally(() => {
      this.assignFormModel.countyCodeList = []
      loadingInstance?.close();
    })
  }

  //查看分配任务详情
  viewJudgeTaskDetail(row, key, value) {
    this.$router.push({
      path: '/verify/judgeTaskDetail',
      query: {workId: this.assignFormModel.workId, verifyTimes: this.assignFormModel.verifyTimes, countyCode:row.countyCode}
    });
  }

  //批量分配
  batchAssign() {
    this.batchAssignFormLoading = true;
    if(this.assignFormModel.countyCodeList.length==0) {
      Message.warning("请选择分配的县")
      this.batchAssignFormLoading = false;
      return;
    }
    dispatchJudgeTask(this.assignFormModel).then(res=> {
      Message.success("批量分配成功")
      this.batchAssignFormLoading = false;
    }).catch(err=> {
      Message.error("批量分配失败")
      this.batchAssignFormLoading = false;
    })
    this.assignFormModel.countyCodeList = []
  }
  //查询任务列表
  getJudgeTaskList() {
    var param = {
      ... this.assignFormModel,
      pageNum : this.pagination.pageNum,
      pageSize : this.pagination.pageSize,
    }
    selectDispatchList(param).then((res:any)=> {
      if(res) {
        this.judgeTaskList = res.rows;
        this.pagination.total = res.total;
      }
    })
  }
  mounted() {
    //调查任务
    queryVerifyWorkList().then(res => {
      if(res.data) {
        res.data.forEach(wd => {
          this.tabOptions.push({label: wd.name, id: wd.id});
        })
        this.tabCheckHandler({item: this.tabOptions[0]});
      }
    });

    var dept = storeUtils.getStorageS(storeUtils.CONST.departInfo)
    if(dept) {
      if (dept.areaLevel == '2') {
        this.subAreaList.push({code:dept.areaCode, name:dept.areaName})
        this.assignFormModel.areaCode=dept.areaCode
      } else if (dept.areaLevel == '1' || dept.areaLevel == '0') {
        //获取登录人的下级区域列表
        queryUserSubArea().then(res=> {
          if (res.data) {
            this.subAreaList = res.data
          }
        })
      }
    }

    //查询可分配人
    queryAreaJudgeUser().then(res=> {
      if(res.data) {
        this.assignUserList = res.data;
      }
    })

    //查询任务列表
    this.getJudgeTaskList();
  }
}
</script>
<style lang="scss" scoped>
.dataInspect {
  display: flex;
  gap: 10px;

  .ha-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .radio-t {
      display: flex;
      align-items: center;
      gap: 6px;

      span {
        font-size: 14px;
      }
    }
  }
}

.m-b10 {
  height: 40px;
}
</style>
